<template>
  <view class="goods_list">
    <!-- 搜索框开始 -->
    <search></search>
    <!-- 导航标签开始 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      active-color="#f8cecc"
      :current="current"
      @change="change"
    >
    </u-tabs>
    <view class="goods-content" v-if="current === 0">
      <!-- 渲染总数据 -->
      <navigator
        class="goods-item u-flex u-flex-margin-bottom-10"
        v-for="item in goodsList"
        :key="item.goods_id"
        :url="'/pages/goods_detail/goods_detail?id=' + item.goods_id"
      >
        <!-- 进行左边图片的渲染 -->
        <view class="goods_img u-flex-1">
          <u-image
            width="80%"
            :src="item.goods_small_logo"
            mode="widthFix"
          ></u-image>
        </view>
        <!-- 进行右边标题和价格的渲染 -->
        <view class="goods_info u-flex-2">
          <view class="goods_name u-line-2">{{ item.goods_name }}</view>
          <!-- 价格 -->
          <view class="goods_price"> ￥{{ item.goods_price }} </view>
        </view>
      </navigator>
    </view>
    <view class="goods-content" v-else-if="current === 1">显示销量内容</view>
    <view class="goods-content" v-else-if="current === 2">显示价格内容</view>
  </view>
</template>

<script>
// 数组需要传的参数
const params = {
  query: "",
  // 关键字
  cid: "",
  //	分类id
  pagenum: 1,
  //	页码
  pagesize: 10,
  //	页容量
};
// 定义数据总条数||页码数
let totalPage = 1;
export default {
  async onLoad({ id }) {
    // const { id } = option;
    //   console.log(option);
    // let id = 6;
    params.cid = id;
    this.getGoods();
  },
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      // 商品列表数组
      goodsList: [],
    };
  },
  methods: {
    async getGoods(callback) {
      const res = await this.$u.get("/goods/search", params);
      console.log(86,res);
      // 前面的下拉页面加载事件，重新发起请求获取到的数据是最新的，前面旧的数据没有再显示了，不符合逻辑。所以要把数组列表里面的新旧数据进行合并再显示
      // this.goodsList = res.message.goods;  message.goods是后台返回来的
      // 新旧代码叠加 把旧的数组解析再把新的数组放进去
      this.goodsList = [...this.goodsList, ...res.message.goods];
      // 给数据总数重新赋值,获取总条数，计算总页数
      totalPage = Math.ceil(res.message.total / params.pagesize);
      console.log(totalPage);
      // 因为异步请求关闭窗口快于发送请求，但是发送请求不等于请求回来了，所以要放在发送请求里，请求完数据后才关闭下拉窗口.但是新bug来了，在首次加载中也进行了关闭窗口，正常情况下不需要执行这个关闭窗口程序
      //  所以这里使用函数+回调函数+短路运算进行处理
      // uni.stopPullDownRefresh(callback);
      console.log("发送请求");
      // console.log("关闭下拉窗口");
      callback && callback();
    },
    change(index) {
      this.current = index;
    },
    // 监听上拉加载事件 滚动条触底事件
    onReachBottom() {
      // console.log("onReachBottom");
      if (params.pagenum >= totalPage) {
        // console.log("没有啦");
        uni.showToast({
          title: "没有更多数据啦",
          icon: "none", //不写none 显示的是打钩的样式
        });
      } else {
        params.pagenum++;
        // console.log("下面更多精彩");
        this.getGoods();
      }
    },
    // 监听下拉刷新事件
    onPullDownRefresh() {
      console.log("onPullDownRefresh");
      // 清空数组
      this.goodsList = [];
      // 重置请求列表 重置页码
      params.pagenum = 1;
      // 发送请求
      this.getGoods(function () {
        // 关闭下拉窗口
        console.log("关闭窗口");
        uni.stopPullDownRefresh();
      });
    },
  },
};
</script>

<style lang="scss">
.goods-item {
  // 设置子项拉伸到父项的高度
  align-items: stretch;
}
.goods_info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .goods_price {
    color: #eb4450;
  }
}
</style>